'use client'

import React, { useState } from 'react';
import { Editor } from '@bytemd/react';
import gfm from '@bytemd/plugin-gfm';
import 'bytemd/dist/index.min.css';
import zhHans from "bytemd/locales/zh_Hans.json";
import Image from "next/image";
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const plugins = [gfm()]

export default function CreateArticle() {
  const [value, setValue] = useState('')

  return (
    <div className="h-auto">
      <div className="flex flex-row justify-between items-center h-14 px-4">
        <Input placeholder="输入文章标题..." className="w-2/3 text-lg md:text-lg border-0 shadow-none focus-visible:ring-0" maxLength={66} />
        <div className="flex justify-end w-1/3 ml-4">
          <Button variant="outline">草稿箱</Button>
          <Button className="mx-4">发布</Button>
          <Image 
            width={36} 
            height={36}
            src="/static/avtar.webp"
            alt=""
          />
        </div>
      </div>
      <Editor 
        value={value}
        locale={zhHans}
        mode="split"
        plugins={plugins}
        onChange={(value) => {
          console.log(value)
          setValue(value)
        }}
      />
    </div>
  )
}
